<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Checkout</title>
    <link rel="shortcut icon" th:href="@{/frontend/images/favicon.ico}"
          href="../../static/frontend/images/favicon.ico"/>
    <link href="../../static/frontend/css/bootstrap.css" th:href="@{/frontend/css/bootstrap.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../static/frontend/js/jquery.min.js" th:src="@{/frontend/js/jquery.min.js}"></script>
    <!-- Custom Theme files -->
    <script src="../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
    <!--theme-style-->
    <link href="../../static/frontend/css/style.css" th:href="@{/frontend/css/style.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- start menu -->
    <link href="../../static/frontend/css/memenu.css" th:href="@{/frontend/css/memenu.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <script type="text/javascript" src="../../static/frontend/js/memenu.js" th:src="@{/frontend/js/memenu.js}"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="../../static/frontend/js/simpleCart.min.js" th:src="@{/frontend/js/simpleCart.min.js}"></script>
    <!-- slide -->
</head>
<body>


<div th:replace="frontend/common::header"></div>

<!---->
<div class="container">
    <div class="check-out">
        <h1>收银台</h1>
        <table id="cart">
            <!-- <tr>
                 <th>商品</th>
                 <th>数量</th>
                 <th>单价</th>
                 <th>送货信息</th>
                 <th>小计</th>
             </tr>-->
            <!-- <tr>
                 <td class="ring-in">
                     <a href="single.html" class="at-in">
                         <img src="../../static/frontend/images/ce.jpg" th:src="@{/frontend/images/ce.jpg}"
                              class="img-responsive" alt="">
                     </a>
                     <div class="sed">
                         <h5>Sed ut perspiciatis unde</h5>
                         <p>(At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium) </p>
                     </div>
                     <div class="clearfix"></div>
                 </td>
                 <td class="check"><input type="text" value="1" onfocus="this.value='';"
                                          onblur="if (this.value == '') {this.value ='';}"></td>
                 <td>$100.00</td>
                 <td>FREE SHIPPING</td>
                 <td>$100.00</td>
             </tr>-->
            <!--   <tr>
                   <td class="ring-in"><a href="single.html" class="at-in"><img src="../../static/frontend/images/ce1.jpg"
                                                                                th:src="@{/frontend/images/ce1.jpg}"
                                                                                class="img-responsive" alt=""></a>
                       <div class="sed">
                           <h5>Sed ut perspiciatis unde</h5>
                           <p>(At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium ) </p>
                       </div>
                       <div class="clearfix"></div>
                   </td>
                   <td class="check"><input type="text" value="1" onfocus="this.value='';"
                                            onblur="if (this.value == '') {this.value ='';}"></td>
                   <td>$200.00</td>
                   <td>FREE SHIPPING</td>
                   <td>$200.00</td>
               </tr>
               <tr>
                   <td class="ring-in"><a href="single.html" class="at-in"><img src="../../static/frontend/images/ce2.jpg"
                                                                                th:src="@{/frontend/images/ce2.jpg}"
                                                                                class="img-responsive" alt=""></a>
                       <div class="sed">
                           <h5>Sed ut perspiciatis unde</h5>
                           <p>(At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium) </p>
                       </div>
                       <div class="clearfix"></div>
                   </td>
                   <td class="check"><input type="text" value="1" onfocus="this.value='';"
                                            onblur="if (this.value == '') {this.value ='';}"></td>
                   <td>$150.00</td>
                   <td>FREE SHIPPING</td>
                   <td>$150.00</td>
               </tr>-->
        </table>

        <div id="orderForm" style="margin-top: 50px">
            <form class="bs-example bs-example-form" id="order_item_form" role="form"
                  style="width: 400px;height: auto;float: right">
                <span id="total" class="price1" style="float: right"></span>
                <br/>
                <br/>
                <div class="input-group">
                    <span class="input-group-addon">收货人：</span>
                    <input style="border-color: #000" type="text" name="name" required="required" lay-verify="required"
                           placeholder="请输入收货人"
                           autocomplete="off" class="form-control"/>
                </div>
                <br/>
                <div class="input-group">
                    <span class="input-group-addon">电  话：</span>
                    <input style="border-color: #000" type="text" name="phone" required="required" lay-verify="required"
                           placeholder="请输入收货人电话"
                           autocomplete="off" class="form-control"/>
                </div>
                <br/>
                <div class="input-group">
                    <label class="input-group-addon">地 址：</label>
                    <input style="border-color: #000" type="text" name="addr" required="required" lay-verify="required"
                           placeholder="请输入收货人地址"
                           autocomplete="off" class="form-control"/>
                </div>

                <a style="float:right;" href="#" onclick="submitOrder()" class=" to-buy">提交订单</a>
            </form>
        </div>
        <div class="clearfix"></div>

        <script>
            $(function () {
                //加载购物车信息
                loadCart();
            });
            function loadCart() {
                $.get("/fleastreet/product/cart/list", function (data) {
                    if (data.code == 0) {
                        var table = $("#cart");
                        if (data.data.length <= 0) {
                            layer.msg("您的购物车中暂无商品，快去购物吧！");
                            $("#orderForm").fadeOut();
                            return;
                        }
                        appendToPage(table, data.data);
                    } else {
                        layer.msg(data.msg);
                    }
                });
            }

            var total = 0;

            function appendToPage(table, items) {
                var th = $("  <tr> <th>商品</th> <th>数量</th> <th>单价</th> <th>送货信息</th> <th>小计</th> <th>操作</th></tr>");
                table.append(th);
                $(items).each(function (index, item) {
                    var tr = $("<tr></tr>");
                    var tdOne = $(" <td class='ring-in'></td>");
                    var url = '/fleastreet/product/' + item.productId;
                    var aOne = $("<a href='" + url + "' class='at-in'></a>");
                    var imageUrl = '/fleastreet/manager/product/img/' + item.productId;
                    var imgOne = $("<img src='" + imageUrl + "'  class='img-responsive' alt=''>");
                    aOne.append(imgOne);
                    tdOne.append(aOne);

                    var divOne = $("<div class='sed'></div>")
                    divOne.append($("<h5>" + item.product.name + "</h5>"));
                    divOne.append($("<p>(" + item.productTag.tagContent + ") </p>"));
                    tdOne.append(divOne);
                    tr.append(tdOne);

                    tr.append($(" <td class='check'><input readonly='true' type='text' value=" + item.productQuantity + " onfocus='this.value='';' onblur='if (this.value == '') {this.value ='';}'></td>"));
                    tr.append($("<td>¥" + item.product.price + "</td>"));
                    tr.append($("<td>FREE SHIPPING</td>"));
                    tr.append($("<td>¥" + item.subTotal + "</td>"));
                    tr.append($("<td onclick='remove( this," + item.productId + ',' + item.subTotal + ")'>删除</td>"));
//                    tr.append($("<td><button onclick='remove(this," + item.product.id + "," + item.subTotal + ")' class='layui-btn layui-btn-radius layui-btn-danger'>删除</button></td>"));
                    table.append(tr);
                    total += item.subTotal;
                });
                $("#total").html("总价：¥" + total);
            }

            /*提交购物车，此时数据从session中取，不使用页面上展示的数据，因为展示的数据也是session中取的*/
            function submitOrder() {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/fleastreet/order/submit",
                    data: $('#order_item_form').serialize(),
                    async: false,
                    error: function (request) {
                        layer.msg("Connection error");
                    },
                    success: function (result) {
                        if (result.code == 0) {
                            layer.msg("订单提交成功！");
                                window.location.href = "/fleastreet/order/myorder";
                        } else {
                            layer.msg(result.msg);
                        }
                    }
                });
            }

            function remove(btn, productId, subTotal) {
                $.get("/fleastreet/product/cart/del?productId=" + productId, function (data) {
                    if (data.code == 0) {
                        layer.msg("删除成功！");
                        $(btn).parent().fadeOut();
                        total -= subTotal;
                        $("#total").html("总价：¥" + total);
                        if (total == 0) {
                            $("#orderForm").fadeOut();
                            $("#cart").fadeOut();
                            layer.msg("您的购物车中暂无商品，快去购物吧！");
                        }
                    } else {
                        layer.msg(data.msg);
                    }
                })
            }
        </script>
        <div th:replace="frontend/common::footer"></div>

        <!--//footer-->
</body>
</html>